<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown预览工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/marked@4.0.0/marked.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        dark: '#1e293b',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .editor-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .markdown-preview h1 {
                @apply text-3xl font-bold mb-4 text-dark border-b pb-2;
            }
            .markdown-preview h2 {
                @apply text-2xl font-bold mb-3 text-dark border-b pb-1;
            }
            .markdown-preview h3 {
                @apply text-xl font-bold mb-2 text-dark;
            }
            .markdown-preview p {
                @apply mb-4 text-gray-700 leading-relaxed;
            }
            .markdown-preview ul {
                @apply list-disc pl-6 mb-4;
            }
            .markdown-preview ol {
                @apply list-decimal pl-6 mb-4;
            }
            .markdown-preview li {
                @apply mb-2;
            }
            .markdown-preview pre {
                @apply bg-gray-800 text-white p-4 rounded-md overflow-x-auto mb-4;
            }
            .markdown-preview code {
                @apply font-mono text-sm bg-gray-100 px-1 py-0.5 rounded;
            }
            .markdown-preview pre code {
                @apply bg-transparent p-0;
            }
            .markdown-preview blockquote {
                @apply border-l-4 border-primary pl-4 italic text-gray-600 mb-4;
            }
            .markdown-preview a {
                @apply text-primary hover:underline;
            }
            .markdown-preview img {
                @apply max-w-full h-auto rounded-md my-4 mx-auto block shadow-md;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-markdown text-2xl text-primary"></i>
                <h1 class="text-xl font-bold text-dark">Markdown预览工具</h1>
            </div>
            <div class="flex space-x-2">
                <button id="copy-btn" class="px-3 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 transition flex items-center">
                    <i class="fa fa-copy mr-1"></i>
                    <span>复制HTML</span>
                </button>
                <button id="theme-toggle" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition flex items-center">
                    <i class="fa fa-moon-o mr-1"></i>
                    <span>暗色模式</span>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- 编辑器区域 -->
            <div class="w-full lg:w-1/2">
                <div class="bg-white rounded-lg shadow-md overflow-hidden editor-shadow">
                    <div class="bg-gray-50 px-4 py-2 border-b flex justify-between items-center">
                        <h2 class="font-medium text-gray-700 flex items-center">
                            <i class="fa fa-pencil-square-o mr-2 text-primary"></i>
                            编辑器
                        </h2>
                        <div class="flex space-x-1">
                            <button class="editor-tool" data-command="header" data-value="1">
                                <i class="fa fa-header text-gray-600 hover:text-primary"></i>
                            </button>
                            <button class="editor-tool" data-command="bold">
                                <i class="fa fa-bold text-gray-600 hover:text-primary"></i>
                            </button>
                            <button class="editor-tool" data-command="italic">
                                <i class="fa fa-italic text-gray-600 hover:text-primary"></i>
                            </button>
                            <button class="editor-tool" data-command="list" data-value="ul">
                                <i class="fa fa-list-ul text-gray-600 hover:text-primary"></i>
                            </button>
                            <button class="editor-tool" data-command="list" data-value="ol">
                                <i class="fa fa-list-ol text-gray-600 hover:text-primary"></i>
                            </button>
                            <button class="editor-tool" data-command="link">
                                <i class="fa fa-link text-gray-600 hover:text-primary"></i>
                            </button>
                            <button class="editor-tool" data-command="image">
                                <i class="fa fa-image text-gray-600 hover:text-primary"></i>
                            </button>
                        </div>
                    </div>
                    <textarea id="editor" class="w-full h-[500px] p-4 focus:outline-none resize-none font-mono text-sm" placeholder="在此输入Markdown内容...">
# Markdown预览示例

这是一个使用Tailwind CSS展示的Markdown预览工具。您可以在左侧编辑Markdown文本，右侧将实时预览渲染效果。

## 基本文本格式

**粗体文本** 使用双星号包裹，*斜体文本* 使用单星号或下划线，***粗斜体文本*** 则使用三星号。

## 列表

### 无序列表
- 项目1
- 项目2
  - 子项目A
  - 子项目B
- 项目3

### 有序列表
1. 第一步
2. 第二步
   1. 子步骤1
   2. 子步骤2
3. 第三步

## 代码块
function previewMarkdown() {
    const markdown = document.getElementById('editor').value;
    const html = marked.parse(markdown);
    document.getElementById('preview').innerHTML = html;
}
## 引用

> 这是一段引用文本，使用大于号(>)开头。
> 可以有多行引用内容。

## 链接和图片

[点击访问示例网站](https://example.com)

![示例图片](https://picsum.photos/800/400)

## 表格

| 表头1 | 表头2 | 表头3 |
|-------|-------|-------|
| 单元格1 | 单元格2 | 单元格3 |
| 单元格4 | 单元格5 | 单元格6 |
                    </textarea>
                </div>
            </div>
            
            <!-- 预览区域 -->
            <div class="w-full lg:w-1/2">
                <div class="bg-white rounded-lg shadow-md overflow-hidden editor-shadow">
                    <div class="bg-gray-50 px-4 py-2 border-b flex items-center">
                        <h2 class="font-medium text-gray-700 flex items-center">
                            <i class="fa fa-eye mr-2 text-primary"></i>
                            预览
                        </h2>
                    </div>
                    <div id="preview" class="markdown-preview p-6 h-[500px] overflow-auto">
                        <!-- Markdown渲染结果将在这里显示 -->
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container mx-auto px-4 text-center">
            <p class="text-sm">© 2025 Markdown预览工具 | 使用Tailwind CSS构建</p>
        </div>
    </footer>

    <script>
        // 初始化marked配置
        marked.setOptions({
            breaks: true,
            gfm: true
        });
        
        // 获取DOM元素
        const editor = document.getElementById('editor');
        const preview = document.getElementById('preview');
        const copyBtn = document.getElementById('copy-btn');
        const themeToggle = document.getElementById('theme-toggle');
        const editorTools = document.querySelectorAll('.editor-tool');
        
        // 初始渲染Markdown
        previewMarkdown();
        
        // 监听编辑器内容变化，实时预览
        editor.addEventListener('input', previewMarkdown);
        
        // 渲染Markdown函数
        function previewMarkdown() {
            const markdown = editor.value;
            const html = marked.parse(markdown);
            preview.innerHTML = html;
        }
        
        // 复制HTML内容
        copyBtn.addEventListener('click', () => {
            const htmlContent = preview.innerHTML;
            navigator.clipboard.writeText(htmlContent)
                .then(() => {
                    copyBtn.innerHTML = '<i class="fa fa-check mr-1"></i><span>已复制</span>';
                    setTimeout(() => {
                        copyBtn.innerHTML = '<i class="fa fa-copy mr-1"></i><span>复制HTML</span>';
                    }, 2000);
                })
                .catch(err => {
                    console.error('复制失败: ', err);
                    copyBtn.innerHTML = '<i class="fa fa-times mr-1"></i><span>复制失败</span>';
                    setTimeout(() => {
                        copyBtn.innerHTML = '<i class="fa fa-copy mr-1"></i><span>复制HTML</span>';
                    }, 2000);
                });
        });
        
        // 切换暗色/亮色模式
        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            const isDarkMode = document.body.classList.contains('dark-mode');
            
            if (isDarkMode) {
                document.body.classList.add('bg-gray-900', 'text-white');
                document.body.classList.remove('bg-gray-50', 'text-gray-800');
                
                const editors = document.querySelectorAll('.editor-shadow');
                editors.forEach(editor => {
                    editor.classList.add('bg-gray-800', 'border-gray-700');
                    editor.classList.remove('bg-white', 'border-gray-200');
                });
                
                editor.classList.add('bg-gray-800', 'text-white', 'border-gray-700');
                editor.classList.remove('bg-white', 'text-gray-800', 'border-gray-200');
                
                preview.classList.add('bg-gray-800', 'text-white');
                preview.classList.remove('bg-white', 'text-gray-800');
                
                themeToggle.innerHTML = '<i class="fa fa-sun-o mr-1"></i><span>亮色模式</span>';
                
                // 更新Markdown预览的暗色样式
                document.querySelectorAll('.markdown-preview h1, .markdown-preview h2, .markdown-preview h3').forEach(el => {
                    el.classList.add('text-white');
                    el.classList.remove('text-dark');
                });
                
                document.querySelectorAll('.markdown-preview p, .markdown-preview li').forEach(el => {
                    el.classList.add('text-gray-300');
                    el.classList.remove('text-gray-700');
                });
                
                document.querySelectorAll('.markdown-preview blockquote').forEach(el => {
                    el.classList.add('text-gray-400');
                    el.classList.remove('text-gray-600');
                });
                
                document.querySelectorAll('.markdown-preview code:not(pre code)').forEach(el => {
                    el.classList.add('bg-gray-700');
                    el.classList.remove('bg-gray-100');
                });
            } else {
                document.body.classList.remove('bg-gray-900', 'text-white');
                document.body.classList.add('bg-gray-50', 'text-gray-800');
                
                const editors = document.querySelectorAll('.editor-shadow');
                editors.forEach(editor => {
                    editor.classList.remove('bg-gray-800', 'border-gray-700');
                    editor.classList.add('bg-white', 'border-gray-200');
                });
                
                editor.classList.remove('bg-gray-800', 'text-white', 'border-gray-700');
                editor.classList.add('bg-white', 'text-gray-800', 'border-gray-200');
                
                preview.classList.remove('bg-gray-800', 'text-white');
                preview.classList.add('bg-white', 'text-gray-800');
                
                themeToggle.innerHTML = '<i class="fa fa-moon-o mr-1"></i><span>暗色模式</span>';
                
                // 恢复Markdown预览的亮色样式
                document.querySelectorAll('.markdown-preview h1, .markdown-preview h2, .markdown-preview h3').forEach(el => {
                    el.classList.remove('text-white');
                    el.classList.add('text-dark');
                });
                
                document.querySelectorAll('.markdown-preview p, .markdown-preview li').forEach(el => {
                    el.classList.remove('text-gray-300');
                    el.classList.add('text-gray-700');
                });
                
                document.querySelectorAll('.markdown-preview blockquote').forEach(el => {
                    el.classList.remove('text-gray-400');
                    el.classList.add('text-gray-600');
                });
                
                document.querySelectorAll('.markdown-preview code:not(pre code)').forEach(el => {
                    el.classList.remove('bg-gray-700');
                    el.classList.add('bg-gray-100');
                });
            }
        });
        
        // 编辑器工具栏功能
        editorTools.forEach(tool => {
            tool.addEventListener('click', () => {
                const command = tool.getAttribute('data-command');
                const value = tool.getAttribute('data-value');
                
                switch(command) {
                    case 'header':
                        insertText(`# 标题 ${value}\n\n`);
                        break;
                    case 'bold':
                        insertText('**粗体文本**');
                        setCursorInside('**', '**');
                        break;
                    case 'italic':
                        insertText('*斜体文本*');
                        setCursorInside('*', '*');
                        break;
                    case 'list':
                        if (value === 'ul') {
                            insertText('- 列表项1\n- 列表项2\n- 列表项3\n');
                            setCursor(editor.value.length - 10);
                        } else {
                            insertText('1. 列表项1\n2. 列表项2\n3. 列表项3\n');
                            setCursor(editor.value.length - 10);
                        }
                        break;
                    case 'link':
                        insertText('[链接文本](https://example.com)');
                        setCursorInside('[', '](https://example.com)');
                        break;
                    case 'image':
                        insertText('![图片描述](https://picsum.photos/800/400)');
                        setCursorInside('![', '](https://picsum.photos/800/400)');
                        break;
                }
                
                // 更新预览
                previewMarkdown();
            });
        });
        
        // 插入文本到编辑器
        function insertText(text) {
            const start = editor.selectionStart;
            const end = editor.selectionEnd;
            const selectedText = editor.value.substring(start, end);
            
            if (selectedText) {
                editor.value = editor.value.substring(0, start) + text + editor.value.substring(end);
            } else {
                editor.value = editor.value.substring(0, start) + text + editor.value.substring(start);
            }
            
            // 设置光标位置
            if (selectedText) {
                editor.selectionStart = start + text.length;
                editor.selectionEnd = start + text.length;
            } else {
                editor.focus();
            }
        }
        
        // 设置光标在特定文本中间
        function setCursorInside(prefix, suffix) {
            const start = editor.value.lastIndexOf(prefix) + prefix.length;
            const end = start;
            editor.selectionStart = start;
            editor.selectionEnd = end;
            editor.focus();
        }
        
        // 设置光标位置
        function setCursor(position) {
            editor.selectionStart = position;
            editor.selectionEnd = position;
            editor.focus();
        }
    </script>
</body>
</html>
    